<template>
  <div class="main">
    <Navigation></Navigation>
    <scroll-container ref="scrollContainer" @scroll="scroll">
      <div class="container-list">
        <div class="category-list">
          <div class="category" data-index="tar_0_0" :class="[{active: focObj[0]}]">
            <div class="school-info">
              <img class="school-bg" src="../../assets/images/xyfc/school-bg.jpg" alt>
              <img class="logo" :src="$store.state.school.logo.fhd" alt>
              <p class="name">{{$store.state.school.name}}</p>
              <p class="desc">{{$store.state.school.motto}}</p>
            </div>
          </div>
          <div class="video" data-index="tar_0_1" :class="[{video_active: focObj[1]}]"></div>
          <multi-list
            @scrollFoc="scrollFoc"
            @scrollTo="scrollTo"
            :groupDatas="hotList"
            ref="multi-list"
            :groupOffset="groups[1]"
            :head="{top:'100-2',left:'0-1',down:'2-0'}"
          >
            <div class="category">
              <ul class="hot-list">
                <img src="../../assets/images/xyfc/hot-bg.png" class="hot-bg" alt>
                <li
                  v-for="(item,index) in hotList.dataArr[0].data"
                  :data-index="'tar_'+ 1+ '_'+index"
                  :class="[{active: hotList.focArr[0][index], more: index === hotList.dataArr[0].data.length - 1}]"
                  :key="index"
                >
                  <my-marquee
                    :align="index === hotList.dataArr[0].data.length - 1 ? 'center':'left'"
                    :active="hotList.focArr[0][index]"
                  >{{item.title}}
                  </my-marquee>
                </li>
              </ul>
            </div>
          </multi-list>
        </div>

        <multi-list
          @scrollFoc="scrollFoc"
          @scrollTo="scrollTo"
          :groupDatas="customData"
          ref="multi-list"
          :groupOffset="groups[2]"
          :head="{top: tops[0],down:'3-0'}"
          v-if="customData.dataArr[0].data.style !== -1"
        >
          <div class="category">
            <div
              :data-index="'tar_'+ 2 + '_'+index"
              :class="[{active: customData.focArr[0][index]}, 'custom0']"
              :key="index"
              v-for="(item, index) in customData.dataArr[0].data"
            >
              <img :src="item.materials[0].img.fhd" alt>
            </div>
          </div>
        </multi-list>

        <multi-list
          :groupDatas="groupDatas"
          ref="multi-list"
          @scrollTo="scrollTo"
          @scrollFoc="scrollFoc"
          :groupOffset="groups[3]"
          :head="{top: tops[1]}"
        >
          <imglist_w384
            :groupData="groupDatas.dataArr[0]"
            :focArr="groupDatas.focArr[0]"
            :group="groups[3]"
          ></imglist_w384>
        </multi-list>
      </div>
    </scroll-container>
    <select-school v-show="showSchool" @SelectedSchool="SelectedSchool"></select-school>
  </div>
</template>

<script>
  import scrollContainer from "@/components/base/scroll-container/scroll-container";
  import multiList from "@/components/base/multi-list/multi-list";
  import imglist_w384 from "../ImgList_w384";
  import imglist_w298 from "../ImgList_w298";
  import Navigation from "@/components/Navigation";
  import myMarquee from "@/components/base/marquee/marquee";
  import selectSchool from "@/components/xyfc/select-school.vue";
  import mixinCommon from "@/assets/js/mixin-common"

  export default {
    name: "TBKTIndex",
    backObjName: "xyfc",
    mixins: [mixinCommon],
    components: {
      Navigation,
      scrollContainer,
      multiList,
      imglist_w384,
      imglist_w298,
      selectSchool,
      myMarquee
    },
    props: ["mainObj"],
    inject: ["reload"],
    methods: {
      scroll(pos) {
        this.scrollY = pos.y;
        // console.log(pos);
      },
      scrollTo(targetIndex) {
        console.log("targetIndex", targetIndex);
        if (targetIndex === "3_4") return;
        if (targetIndex === "3_0") {
          this.$store.commit("setNavigationShow", false);
          this.$refs.scrollContainer.$refs.scroll.scrollTo(0, -660, 1200);
        } else {
          this.$refs.scrollContainer.scrollTo(targetIndex);
        }
      },
      scrollFoc(focObj) {
        if (focObj.group > 1) {
          this.$store.commit("setAppBg", this.$store.state.appBgInfo.default);
          if (focObj.group === 2) {
            this.tops[0] = "0-0";
          } else if (focObj.group === 3) {
            if (this.customData.dataArr[0].data.length > 0) {
              this.tops[1] = "2-0";
            } else {
              this.tops[1] = "0-0";
            }
          }
          this.bridge.closeVedio();
        } else {
          // 视频没播放时播放
          setTimeout(() => {
            this.homeVedio();
          }, 350);
          if (this.$store.state.appBg !== this.$store.state.appBgInfo.xyfc)
            this.$store.commit("setAppBg", this.$store.state.appBgInfo.xyfc);
        }
      },
      SelectedSchool(school) {
        this.setBackObj({backFocArr: ["0-0"]});
        this.showSchool = false;
        this.reload();
      },
      getVedio() {
        let contentId = "";
        let folderCode = "";
        this.hs.ajax.get(
          "http://" +
          this.$store.state.domain +
          "/SMSCH-STB/column/find?columnId=6",
          data => {
            data = JSON.parse(data);
            //console.log(data);
            if (data.head.code === 1) {
              this.hs.ajax.get(
                "http://" +
                this.$store.state.domain +
                "/SMSCH-STB/material/list?columnId=" +
                data.body.id +
                "&pageNum=1&pageSize=1" +
                "&schoolId=" +
                this.$store.state.school.id,
                data => {
                  data = JSON.parse(data);
                  //console.log(data);
                  if (data.head.code === 1) {
                    contentId = data.body[0].more.video;
                    folderCode = data.body[0].more.contentId;
                  }
                },
                0,
                function (msg) {
                },
                3000
              );
            }
          },
          0,
          function (msg) {
          },
          3000
        );

        // 本地测试屏蔽ips的接口调用,有跨域问题, 影响页面
        let domain = window.location.host;
        // console.log(domain);
        if (domain.indexOf("ips-4k") === -1) {
          return;
        }

        let url =
          "http://ips-4k.hzdtv.tv/dataquery/contentPlayUrl?folderCode=" +
          folderCode +
          "&contentId=" +
          contentId +
          "&contentType=" +
          13 +
          "&playUrlType=rtsp";
        this.hs.ajax.get(
          url,
          _responseText => {
            // alert('getVedio_responseText:' + _responseText) // test
            let res = JSON.parse(_responseText)
            this.vedioUrl = res.playUrl;
          },
          0,
          3000
        );
      },
      getNews() {
        this.hs.ajax.get(
          "http://" +
          this.$store.state.domain +
          "/SMSCH-STB/column/find?columnId=7",
          data => {
            data = JSON.parse(data);
            //console.log(data);
            if (data.head.code === 1) {
              let title = data.body.name;
              this.hotList.dataArr[0].title = data.body.name;
              this.hs.ajax.get(
                "http://" +
                this.$store.state.domain +
                "/SMSCH-STB/material/list?columnId=" +
                data.body.id +
                "&pageNum=1&pageSize=5&schoolId=" +
                this.$store.state.school.id,
                data => {
                  data = JSON.parse(data);
                  //console.log(data);
                  if (data.head.code === 1 && data.body.length > 0) {
                    data.body.forEach((item, index) => {
                      this.hotList.dataArr[0].data.push({
                        title: item.name,
                        id: item.id
                      });
                    });
                  }
                },
                0,
                function (msg) {
                },
                3000
              );
            }
          },
          0,
          function (msg) {
          },
          3000
        );
        this.hotList.dataArr[0].data.push({title: "更多热门"});
      },
      getData() {
        // 校园视频
        this.hs.ajax.get(
          "http://" +
          this.$store.state.domain +
          "/SMSCH-STB/column/_find?columnId=11&schoolId=" +
          this.$store.state.school.id,
          data => {
            data = JSON.parse(data);
            //console.log(data);
            if (data.head.code === 1) {
              let listSize = data.body.listSize;
              let title = data.body.name;
              this.groupDatas.dataArr[0].title = title;
              this.folderCode = data.body.materials[0].more.url;
              let url =
                "http://ips-4k.hzdtv.tv/dataquery/folderContents?folderCode=" +
                this.folderCode +
                "&fields=viewpoints&pageItems=20&cImageMode=384,214,JPG&segmentIndex=1&pageIndex=1";
              this.hs.ajax.post(
                "http://125.210.113.145/WSL/Core/CrossDomain.ashx",
                "url=" +
                encodeURIComponent(url) +
                "&data=&method=get&type=default",
                obj => {
                  obj = JSON.parse(obj);
                  //console.log(obj);
                  if (obj.contents.length > 0) {
                    obj.contents.forEach((item, index) => {
                      this.groupDatas.dataArr[0].data.push({
                        name: obj.contents[index].name,
                        // name: obj.contents[index].name.split("--")[1],
                        more: {
                          // teacher: obj.contents[index].name.split("--")[0]
                          teacher: ""
                        },
                        img: {
                          fhd: obj.contents[index].images[0]
                            ? obj.contents[index].images[0].url
                            : ""
                        },
                        base: {
                          createUser: null
                        },
                        contentId: obj.contents[index].contentId,
                        contentType: obj.contents[index].contentType
                      });
                    });
                  }
                },
                0,
                function (msg) {
                },
                3000
              );
            }
          },
          0,
          function (msg) {
          },
          3000
        );
      },
      getCustomData() {
        // 推荐一
        this.hs.ajax.get(
          "http://" +
          this.$store.state.domain +
          "/SMSCH-STB/column/_find?columnId=" + this.tjIds[0] + "&schoolId=" +
          this.$store.state.school.id,
          data => {
            data = JSON.parse(data);
            //console.log(data);
            if (data.head.code === 1) {
              this.customData.dataArr[0].data.push(data.body);
            }
          },
          0,
          function (msg) {
          },
          3000
        );

        // 直播
        this.hs.ajax.get(
          "http://" +
          this.$store.state.domain +
          "/SMSCH-STB/column/_find?columnId=" + this.tjIds[1] + "&schoolId=" +
          this.$store.state.school.id,
          data => {
            data = JSON.parse(data);
            //console.log(data);
            if (data.head.code === 1) {
              this.customData.dataArr[0].data.push(data.body);
            }
          },
          0,
          function (msg) {
          },
          3000
        );
        // 投票
        this.hs.ajax.get(
          "http://" +
          this.$store.state.domain +
          "/SMSCH-STB/column/_find?columnId=" + this.tjIds[2] + "&schoolId=" +
          this.$store.state.school.id,
          data => {
            data = JSON.parse(data);
            //console.log(data);
            if (data.head.code === 1) {
              this.customData.dataArr[0].data.push(data.body);
            }
          },
          0,
          function (msg) {
          },
          3000
        );
      },
      homeVedio() {
        if (!this.bridge.playState) {
          // 设置bound 和 vedio 的参数
          this.$store.commit("setVideoInfo", {
            offsetLeft: 552,
            offsetTop: 235,
            width: 816,
            height: 460
          });

          this.bridge.countFlag = 0;
          this.bridge.movies = [this.vedioUrl];
          this.bridge.initPlay();
        }
      },
      goPlay(folderCode, contentId, contentType) {
        // this.$store.commit("setAppShow", false);
        let url =
          "http://ips-4k.hzdtv.tv/dataquery/gotoAuthPlay?folderCode=" +
          folderCode +
          "&contentId=" +
          contentId +
          "&contentType=" +
          contentType;
        this.hs.ajax.get(
          url,
          _responseText => {
            // alert('gotoAuthPlay_responseText:'+_responseText) // test
            let res = JSON.parse(_responseText);
            //console.log(res);
            if (res.result == "0" || res.result == 0) {
              if (res.authResult == 0) {
                let url =
                  "http://ips-4k.hzdtv.tv/dataquery/contentPlayUrl?folderCode=" +
                  folderCode +
                  "&contentId=" +
                  contentId +
                  "&contentType=" +
                  contentType +
                  "&playUrlType=rtsp";
                this.hs.ajax.get(
                  url,
                  _responseText => {
                    // alert('rtsp_responseText:'+_responseText) // test
                    let res = JSON.parse(_responseText);
                    this.bridge.gotoApplication2play(res.playUrl);
                  },
                  0,
                  3000
                );
              } else {
                this.bridge.gotoApplication2order({
                  ppvId: res.ppvId,
                  columnAlias: this.folderCode
                });
              }
            }
          }, 0, 3000);
      },
      getSchoolinfo() {
        // 获取学校信息
        this.hs.ajax.get(
          "http://" +
          this.$store.state.domain +
          "/SMSCH-STB/stb/find-sch?stbid=" + this.bridge.stbid + '&r=' + Math.random(),
          data => {
            data = JSON.parse(data);
            console.log(data);
            if (data.head.code === 1) {
              this.$store.commit("setSchool", data.body);
            }
          }, 0, function (msg) {
          }, 3000);
      }
    },
    data() {
      return {
        showSchool: false,
        folderCode: "",
        groups: [0, 1, 2, 3, 4],
        groupOffset: 2,
        focObj: [false, false],
        tops: ["0-0", "0-0", "0-0"],
        vedioUrl: "",
        customData: {
          dataArr: [
            {
              maxLine: 3,
              dynamic: true,
              title: "",
              data: [],
              focObj: []
            }
          ],
          focArr: [[]]
        },
        hotList: {
          dataArr: [
            {
              maxLine: 1,
              dynamic: false,
              title: "更多热门",
              data: [],
              focObj: []
            }
          ],
          focArr: [[]]
        },
        groupDatas: {
          dataArr: [
            {
              maxLine: 4,
              dynamic: true,
              title: "",
              data: [],
              focObj: []
            }
          ],
          focArr: [[]]
        },
        tjIds: [8, 9, 10]   // 推荐位id
      };
    },

    created() {
      // console.log('XYFCIndex --- created')

      // 确保获取到stbid
      let stbidInterval = setInterval(() => {
        if (this.bridge.stbid !== 'test' || window.location.hostname === 'localhost') {
          clearInterval(stbidInterval)
          stbidInterval = null
          // 获取学校信息
          this.getSchoolinfo();
          // 获取首页视频
          this.getVedio();
          //获取新闻
          this.getNews();
          // 获取运营位
          this.getCustomData();
          // 获取校园视频
          this.getData();

          //埋点
          this.wasuLog(this.$route.path, '校园风采')
        }
      }, 100)

      this.$once('hook:beforeDestroy', () => {
        this.bridge.closeVedio();
        clearInterval(stbidInterval)
      })

    },
    mounted() {
      // console.log('XYFCIndex --- mounted')

      // 处理固定区域
      new fObject(0, 0, null,
        "100-2",
        obj => {
          if (this.customData.dataArr[0].data.length > 0) {
            this.hs.initFocus("2-0");
          } else if (this.groupDatas.dataArr[0].data.length > 0) {
            this.hs.initFocus("3-0");
          }
        },
        "null",
        "0-1"
      );
      new fObject(0, 1, null,
        "100-2",
        obj => {
          if (this.customData.dataArr[0].data.length > 0) {
            this.hs.initFocus("2-0");
          } else if (this.groupDatas.dataArr[0].data.length > 0) {
            this.hs.initFocus("3-0");
          }
        },
        "0-0",
        "1-0"
      );
      this.hs.fObjCommit();

      this.hs.addFocus([0], (group, objid, objindex) => {
        //console.log(group + "|" + objindex);
        this.$set(this.focObj, objindex, true);
        this.$refs.scrollContainer.$refs.scroll.scrollTo(0, 0, 1200);
        if (this.$store.state.appBg !== this.$store.state.appBgInfo.xyfc)
          this.$store.commit("setAppBg", this.$store.state.appBgInfo.xyfc);
        if (!this.$store.state.navigationShow)
          this.$store.commit("setNavigationShow", true);
        this.homeVedio();
      });
      this.hs.addBlur([0], (group, objid, objindex) => {
        this.$set(this.focObj, objindex, false);
      });

      // 处理所有点击逻辑
      this.hs.addSelect(this.groups, (group, objid, objindex) => {
        if (!(this.bridge.playState === true && group === 0 && objindex === 1))
          this.bridge.closeVedio();

        if (group === 0) {
          if (objindex === 0) {
            // 切换学校
            this.showSchool = true;
            this.hs.initFocus("101-0");
          } else if (objindex === 1) {
            // 视频全屏
            this.bridge.fullScreen();
          }
        } else if (group === 1) {
          // 校园公告
          this.setBackObj({backFocArr: [this.hs.focObj.objid]});
          if (objindex < this.hotList.dataArr[0].data.length - 1) {
            this.$router.push("/xyfc/xyxxs/" + objindex);
          } else {
            this.$router.push("/xyfc/xyxxs/-1");
          }
        } else if (group === 2) {
          // 运营位
          this.setBackObj({backFocArr: [this.hs.focObj.objid]});

          // 获取点击的推荐位数据
          let data = this.customData.dataArr[0].data[objindex];

          //埋点
          this.wasuLog('/xyfc/tjw' + (objindex + 1), '推荐位' + (objindex + 1))

          if (
            parseInt(data.materials["0"].moduleType) === 4 &&
            data.materials["0"].more.url
          ) {
            window.location.href = data.materials["0"].more.url;
          } else if (parseInt(data.materials["0"].moduleType) === 2) {
            // 运营位2,3
            this.$router.push("/xyfc/xyzb");
          } else if (parseInt(data.materials["0"].moduleType) === 3) {
            this.$router.push("/xyfc/voter/-1");
          }
        } else if (group === 3) {
          // 校园视频
          this.goPlay(
            this.folderCode,
            this.groupDatas.dataArr[0].data[objindex].contentId,
            this.groupDatas.dataArr[0].data[objindex].contentType
          );
        }
      });

      this.hs.initFocus("100-4");

      //  查看是否有记忆焦点
      if (this.hs.cookie.get(this.backObjName)) {
        let backObj = JSON.parse(this.hs.cookie.get(this.backObjName));
        let focArr = backObj.backFocArr;
        this.hs.cookie.delOne(this.backObjName);
        //console.log(JSON.stringify(focArr));
        setTimeout(() => {
          this.hs.initFocus(focArr[0]);
        }, 800)
      }
      // 播放首页画框视频, 焦点延迟, 判断是不是在本页停留
      setTimeout(() => {
        if (this.isOnPage && this.hs.focObj.objid === '100-4') {
          this.homeVedio();
        }
      }, 1100);

      this.bridge.whenKeyBack = () => {
        if (this.hs.focObj.group === 101) {
          this.SelectedSchool();
        } else if (this.$store.state.appShow) {
          // 当页面显示的时候就返回首页, 隐藏的时候, 就显示页面
          this.$bridge.callHandler(
            "wasu_function_gotoApplication",
            {
              packageName: "com.wasu.launcher",
              className: "com.wasu.launcher.MainActivity"
            },
            function (response) {
            }
          );
        } else {
          this.$store.commit("setAppShow", true);
        }
      };
    }
  };
</script>
<style scoped lang="less">
  .main {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;
    .container-list {
      padding-top: 235px;
      margin: 0 125px;
      .category-list {
        position: relative;
        display: flex;
        margin-left: -48px;
        margin-right: -48px;
        .category {
          width: 382px;
          height: 460px;
          border-radius: 8px;
          margin-left: 48px;
          position: relative;
          .school-info {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
            border-radius: 5px;
            align-items: center;
            overflow: hidden;
            p {
              margin: 0;
              padding: 0;
              color: #fff;
            }
            .name {
              height: 38px;
              font-size: 38px;
              line-height: 38px;
            }
            .desc {
              margin-top: 28px;
              height: 30px;
              line-height: 30px;
              font-size: 30px;
              width: 98%;
              text-align: center;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .school-bg {
              width: 100%;
              height: 100%;
              position: absolute;
              z-index: -1;
            }
            .logo {
              margin-top: 40px;
              margin-bottom: 33px;
              width: 146px;
              height: 146px;
            }
          }
          .hot-list {
            position: relative;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 460px;
            display: flex;
            flex-direction: column;
            list-style: none;
            .hot-bg {
              position: absolute;
              z-index: -1;
            }
            li {
              font-size: 30px;
              padding: 0 24px;
              display: block;
              flex-grow: 0;
              overflow: hidden;
              white-space: nowrap;
              // text-overflow: ellipsis;
              height: 76px;
              line-height: 76px;
              position: relative;
              color: #414141;
            }
            .more {
              text-align: center;
              font-size: 36px;
              color: #132d55;
            }
            .active {
              color: #fff;
              background-color: #0e60e9;
              border: solid 2px #ffffff;
              border-radius: 8px;
              transform: scale(1.1);
              -webkit-transform: scale(1.1);
            }
          }
        }
        .video {
          margin-left: 46px;
          width: 816px;
          height: 460px;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .activity-container {
        margin-left: 48px;
        height: 348px;
        overflow: hidden;
        position: relative;
      }
      .channel-container {
        margin-left: 48px;
        height: 328px;
        position: relative;
        span {
          position: absolute;
        }
      }
      .nav1_img {
        border-radius: 8px;
      }

      .category {
        display: flex;
        width: 1675px;
        .custom0 {
          margin: 48px 0 48px 48px;
          width: 528px;
          height: 294px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 8px;
          }
        }
        .custom0:first-child {
          margin-left: 0px;
        }
      }

      .active {
        border: 2px solid #ffffff;
        border-radius: 8px;
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
      }

      .video_active {
        border: 2px solid #ffffff;
        border-radius: 8px;
      }
    }
  }
</style>
